@import url('./theme.less');

div,
span,
p,
h1,
h2,
h3,
h4,
h5,
h6,
main,
article,
title,
aside,
ul,
li,
a,
i {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body[data-theme='light'] {
  div,
  span,
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  main,
  article,
  title,
  aside,
  ul,
  li,
  a,
  i {
    background: var(--primary-background-color);
    color: var(--primary-color-dark);
  }

  use {
    fill: var(--primary-color-dark);
  }

  li.el-dropdown-menu__item {
    &:hover {
      background: var(--primary-background-color);
      color: var(--primary-color-active);

      a {
        color: var(--primary-color-active);
      }
    }
  }
}

body[data-theme='dark'] {
  div,
  span,
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  main,
  article,
  title,
  aside,
  ul,
  li,
  a,
  i {
    background: var(--primary-background-color-dark);
    color: var(--primary-color);
  }

  use {
    fill: var(--primary-color);
  }

  .el-dropdown-menu__item {
    &:hover {
      background: var(--primary-background-color-dark);
      color: var(--primary-color-active);

      a {
        color: var(--primary-color-active);
      }
    }
  }
}

// @media (prefers-color-scheme: dark) {
//   body {
//     background:  var(--primary-background-color-dark);
//     color: var(--primary-color-dark);
//   }
// }

// @media (prefers-color-scheme: light) {
//   body {
//     background:  var(--primary-background-color);
//     color: var(--primary-color);
//   }
// }

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
    Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;

  &:hover {
    text-decoration: none;
  }
}

ul {
  list-style-type: none;
}

a.nuxt-link-active {
  color: var(--primary-color-active) !important;
}

.el-dropdown-link {
  cursor: pointer;
}

.app-layout-box {
  width: 100vw;
  height: 100vh;

  .app-main-box {
    height: calc(100vh - 80px);
    overflow-y: auto;

    .container {
      height: 100%;
      padding: 0 200px;
    }
  }
}

.header-box {
  width: 100%;
  height: 80px;
  padding: 0 200px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .header-left {
    font-size: 20px;
    vertical-align: bottom;
  }

  .header-center {
    height: 100%;
    flex: 1;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    .active {
      color: var(--primary-color-active);
      font-weight: 700;
    }
  }
}
